@import "variables";

$table-padding: 12px;

.cell {
  border-bottom: 1px $neutral-color-200 solid;
  padding: 8px $table-padding * 1.5;
}

.hydro-table {
  border-collapse: collapse;
  width: 100%;
  background: white;

  &-head {
    font-size: 12px;
    font-family: $font-family-bold;
    color: $neutral-color-900;

    &__cell {
      @extend .cell;
      text-align: left;
    }
  }

  &-body {
    color: $neutral-text-color;

    & :last-child &__cell {
      border-bottom: none;
    }

    &__row {
      outline: none;

      [class$="services"] & {
        background-color: $neutral-color-200;
        border-bottom: 2px solid #ffffff;
      }

      &.__link {
        &:hover {
          background-color: #e6e9ed;
          cursor: pointer;
        }
      }
    }

    &__cell {
      @extend .cell;
      font-size: 12px;
    }
  }
}